<template>
  <div class="pay">
    <van-password-input
      :value="value"
      :error-info="errorInfo"
      info="输入支付密码"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="value"
      :show="showKeyboard"
      :gutter="10"
      @blur="showKeyboard = false"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      value: "",
      errorInfo: "",
      showKeyboard: true,
    };
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== "123456") {
        this.errorInfo = "密码错误";
        setTimeout(() => {
          this.value = "";
        }, 1000);
      } else if (value === "123456") {
        Toast.loading({
          message: "支付中...",
          forbidClick: true,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pay {
  margin-top: 60px;
}
</style>